<html>
<head>
    <title>SIMILE | Timeplot | Tests | Time Geometries</title>
    <link rel='stylesheet' href='../../styles.css' type='text/css' />
    
    <style>
        body {
            background-color: #fff;
            background-image: none;
        }
        
        h2 {
            border-bottom: none !important;
        }
    </style>
    
    <script type="text/javascript" src="http://static.simile.mit.edu/timeplot/api/1.0/timeplot-api.js"></script>

    <script>
        var timeplot1 = null;
        var timeplot2 = null;
        var timeplot3 = null;
        var timeplot4 = null;
        var timeplot5 = null;
        var timeplot6 = null;
        var timeplot7 = null;
        var timeplot8 = null;
        var timeplot9 = null;
        var timeplot10 = null;

        function loadTimeplot(div, source) {
            var eventSource = new Timeplot.DefaultEventSource();

            var timeGeometry = new Timeplot.DefaultTimeGeometry({
                gridColor: "#000000"
            });
            
            var plotInfo = [
                Timeplot.createPlotInfo({
                    timeGeometry: timeGeometry,
                    eventSource: eventSource
                })                
            ];
            
            var timeplot = Timeplot.create(div, plotInfo);
            timeplot.loadXML(source, eventSource);
            return timeplot;
        }
        
        function onLoad() {
            timeplot1 = loadTimeplot(document.getElementById("timeplot1"), "seconds.xml");
            timeplot2 = loadTimeplot(document.getElementById("timeplot2"), "minutes.xml");
            timeplot3 = loadTimeplot(document.getElementById("timeplot3"), "hours.xml");
            timeplot4 = loadTimeplot(document.getElementById("timeplot4"), "days.xml");
            timeplot5 = loadTimeplot(document.getElementById("timeplot5"), "weeks.xml");
            timeplot6 = loadTimeplot(document.getElementById("timeplot6"), "months.xml");
            timeplot7 = loadTimeplot(document.getElementById("timeplot7"), "years.xml");
            timeplot8 = loadTimeplot(document.getElementById("timeplot8"), "decades.xml");
            timeplot9 = loadTimeplot(document.getElementById("timeplot9"), "centuries.xml");
            timeplot10 = loadTimeplot(document.getElementById("timeplot10"), "millennia.xml");
        }            
        
        var resizeTimerID = null;
        function onResize() {
            if (resizeTimerID == null) {
                resizeTimerID = window.setTimeout(function() {
                    resizeTimerID = null;
                    if (timeplot1) timeplot1.repaint();
                    if (timeplot2) timeplot2.repaint();
                    if (timeplot3) timeplot3.repaint();
                    if (timeplot4) timeplot4.repaint();
                    if (timeplot5) timeplot5.repaint();
                    if (timeplot6) timeplot6.repaint();
                    if (timeplot7) timeplot7.repaint();
                    if (timeplot8) timeplot8.repaint();
                    if (timeplot9) timeplot9.repaint();
                    if (timeplot10) timeplot10.repaint();
                }, 0);
            }
        }
    </script>
</head>
<body onload="onLoad();" onresize="onResize();">
<!--#include virtual="../../sidebar.html" -->
<ul id="path">
  <li><a href="/" title="Home">SIMILE</a></li>
  <li><a href="../../">Timeplot</a></li>
  <li><a href="../">Tests</a></li>
  <li><span>Time Geometries</span></li>
</ul>

<div id="body">
	<h1>Time Geometries Tests</h1>
	<h2>Seconds</h2>
    <div id="timeplot1" class="timeplot"></div>
    <h2>Minutes</h2>
    <div id="timeplot2" class="timeplot"></div>
    <h2>Hours</h2>
    <div id="timeplot3" class="timeplot"></div>
    <h2>Days</h2>
    <div id="timeplot4" class="timeplot"></div>
    <h2>Weeks</h2>
    <div id="timeplot5" class="timeplot"></div>
    <h2>Months</h2>
    <div id="timeplot6" class="timeplot"></div>
    <h2>Years</h2>
    <div id="timeplot7" class="timeplot"></div>
    <h2>Decades</h2>
    <div id="timeplot8" class="timeplot"></div>
    <h2>Centuries</h2>
    <div id="timeplot9" class="timeplot"></div>
    <h2>Millennia</h2>
    <div id="timeplot10" class="timeplot"></div>
</div>
    
</body>
</html>
